<template>
  <div>
    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
    </el-radio-group>

    <el-tabs
      :tab-position="tabPosition"
      style="height: 100%"
      v-model="tabIndex"
      @tab-click="selectRuleProperty()"
    >
      <el-button type="primary" @click="dialogFormVisible = true"
        >新增业务属性</el-button
      >
      <el-tab-pane
        :label="item.name"
        v-for="item in businessNames"
        :key="item.id"
      >
        <el-table :data="tableData" height="650" border style="width: 60%">
          <el-table-column prop="name" label="属性名称" width="180">
          </el-table-column>
          <el-table-column prop="code" label="属性编码"> </el-table-column>
          <el-table-column prop="type" label="属性类型"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 弹窗 -->
    <el-dialog title="业务类型" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="属性名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="属性编码" :label-width="formLabelWidth">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="属性类型" :label-width="formLabelWidth">
          <el-select v-model="optionsValue" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "BusinessProperty",
  data() {
    return {
      tabIndex: 0,
      optionsValue: "",
      options: [
        {
          id: 1,
          label: "数字",
          value: 1,
        },
        {
          id: 2,
          label: "字符串",
          value: 2,
        },
        {
          id: 3,
          label: "时间",
          value: 3,
        },
      ],
      form: {
        name: "",
        code: "",
      },
      formLabelWidth: "120px",
      dialogFormVisible: false,
      tabPosition: "left",
      businessNames: [],
      tableData: [],
    };
  },
  methods: {
    selectBusinessName() {
      this.$http({
        method: "GET",
        url: "/businessRuleTemp",
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.businessNames = resp.data.data;
          this.selectRuleProperty(this.businessNames[this.tabIndex].id);
        } else {
          this.$message.error(resp.data.msg);
        }
      });
    },
    deleteRow(index, tableData) {
      this.$http({
        method: "POST",
        url: "/businessProperty/del",
        params: {
          id: tableData[index].id,
        },
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.selectRuleProperty(this.businessNames[this.tabIndex].id);
        } else {
          this.$message.error(resp.data.msg);
        }
      });
    },
    add() {
      this.$http({
        method: "POST",
        url: "/businessProperty/add",
        data: {
          name: this.form.name,
          code: this.form.code,
          type: this.optionsValue,
          businessRuleTempId: this.businessNames[this.tabIndex].id,
        },
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.dialogFormVisible = false;
          this.form.name = ""
          this.form.code = ""
          this.form.optionsValue = ""
          this.$message({
            message: resp.data.msg,
            type: "success",
          });
          this.selectRuleProperty(this.businessNames[this.tabIndex].id);
        } else {
          this.$message.error(resp.data.msg);
        }
      });
    },
    selectRuleProperty(businessRuleTempId) {
      if (businessRuleTempId === undefined) {
        businessRuleTempId = this.businessNames[this.tabIndex].id;
      }
      this.$http({
        method: "GET",
        url: "/businessProperty",
        params: {
          businessRuleTempId: businessRuleTempId,
        },
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.tableData = resp.data.data;
        } else {
          this.$message.error(resp.data.msg);
        }
      });
    },
  },
  mounted() {
    this.selectBusinessName();
  },
};
</script>

<style scoped>
</style>